<!DOCTYPE html>
<html lang=-->
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 &amp;#160; 为什么使用 Boo">
<meta name="keywords" content="网建随记">
<meta property="og:type" content="article">
<meta property="og:title" content="bootstrap">
<meta property="og:url" content="https://iiitoo.com/2014/11/29/bootstrap/index.html">
<meta property="og:site_name" content="iiitoo">
<meta property="og:description" content="什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 &amp;#160; 为什么使用 Boo">
<meta property="og:image" content="http://www.w3cschool.cc/images/compatible_ie.gif">
<meta property="og:image" content="http://www.w3cschool.cc/images/compatible_firefox.gif">
<meta property="og:image" content="http://www.w3cschool.cc/images/compatible_opera.gif">
<meta property="og:image" content="http://www.w3cschool.cc/images/compatible_chrome.gif">
<meta property="og:image" content="http://www.w3cschool.cc/images/compatible_safari.gif">
<meta property="og:image" content="http://www.w3cschool.cc/wp-content/uploads/2014/06/responsive.jpg">
<meta property="og:updated_time" content="2017-05-12T22:20:51.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="bootstrap">
<meta name="twitter:description" content="什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 &amp;#160; 为什么使用 Boo">
<meta name="twitter:image" content="http://www.w3cschool.cc/images/compatible_ie.gif">
        
            
            
            
        <link rel="shortcut icon" href="/images/favicon.ico">
            
              
              
              
        <link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192">
              
              
              
              
        <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
              
              
        
        <!-- title -->
        <title>
        bootstrap
        </title>
        <!-- styles -->
        <link rel="stylesheet" href="/css/style.css">
        <!-- styles -->
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_lb4f241dchqcl3di.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/lib/meslo-LG/styles.css">
<link rel="stylesheet" href="/lib/justified-gallery/justifiedGallery.min.css">

        <!-- rss -->
        
        
        <link rel="alternate" href="/atom.xml" title="iiitoo" type="application/atom+xml" />
                                                                                                    
</head>

<body>
    
      <div id="header-post">
  <a id="menu-icon" href="#"><i class="fa fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#"><i class="fa fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fa fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
         
          <li><a href="/">首</a></li>
         
          <li><a href="/about/">关于这</a></li>
         
          <li><a href="/reading/">读什么</a></li>
         
          <li><a href="/book/">写本书</a></li>
         
          <li><a href="/categories/blog/">写博客</a></li>
         
          <li><a href="/categories/learning/">做什么</a></li>
        
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" href="/2015/03/22/MWeb/"><i class="fa fa-chevron-left" aria-hidden="true" onmouseover='$("#i-prev").toggle();' onmouseout='$("#i-prev").toggle();'></i></a></li>
        
        
        <li><a class="icon" href="/2014/11/29/Pure中文版/"><i class="fa fa-chevron-right" aria-hidden="true" onmouseover='$("#i-next").toggle();' onmouseout='$("#i-next").toggle();'></i></a></li>
        
        <li><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa fa-chevron-up" aria-hidden="true" onmouseover='$("#i-top").toggle();' onmouseout='$("#i-top").toggle();'></i></a></li>
        <li><a class="icon" href="#"><i class="fa fa-share-alt" aria-hidden="true" onmouseover='$("#i-share").toggle();' onmouseout='$("#i-share").toggle();' onclick='$("#share").toggle();return false;'></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">Previous post</span>
      <span id="i-next" class="info" style="display:none;">Next post</span>
      <span id="i-top" class="info" style="display:none;">Back to top</span>
      <span id="i-share" class="info" style="display:none;">Share post</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
    <!-- <li class="social-share share-component" data-sites="facebook"></li> -->
    <li class="social-share share-component" data-sites="wechat"></li>
    <li class="social-share share-component" data-sites="qq"></li>
    <li class="social-share share-component" data-sites="twitter"></li>
    <li class="social-share share-component" data-sites="weibo"></li>
    <li class="social-share share-component" data-sites="tencent"></li>
    <li class="social-share share-component" data-sites="qzone"></li>
    <li class="social-share share-component" data-sites="douban"></li>
    <li class="social-share share-component" data-sites="diandian"></li>
    <li class="social-share share-component" data-sites="google"></li>
    <li class="social-share share-component" data-sites="linkedin"></li>
    <li class="social-share share-component" data-sites="qzone"></li>
    <!-- <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=https://iiitoo.com/2014/11/29/bootstrap/&title=bootstrap"><i class="fa fa-linkedin " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=https://iiitoo.com/2014/11/29/bootstrap/&is_video=false&description=bootstrap"><i class="fa fa-pinterest " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="mailto:?subject=bootstrap&body=Check out this article: https://iiitoo.com/2014/11/29/bootstrap/"><i class="fa fa-envelope " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="https://getpocket.com/save?url=https://iiitoo.com/2014/11/29/bootstrap/&title=bootstrap"><i class="fa fa-get-pocket " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://reddit.com/submit?url=https://iiitoo.com/2014/11/29/bootstrap/&title=bootstrap"><i class="fa fa-reddit " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://www.stumbleupon.com/submit?url=https://iiitoo.com/2014/11/29/bootstrap/&title=bootstrap"><i class="fa fa-stumbleupon " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://digg.com/submit?url=https://iiitoo.com/2014/11/29/bootstrap/&title=bootstrap"><i class="fa fa-digg " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://www.tumblr.com/share/link?url=https://iiitoo.com/2014/11/29/bootstrap/&name=bootstrap&description="><i class="fa fa-tumblr " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://connect.qq.com/widget/shareqq/index.html?url=https://iiitoo.com/2014/11/29/bootstrap/&title=&source=&desc=&pics="><i class="fa fa-qq " aria-hidden="true"></i></a></li> -->

</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#什么是-Bootstrap？"><span class="toc-number">1.</span> <span class="toc-text">什么是 Bootstrap？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#历史"><span class="toc-number">2.</span> <span class="toc-text">历史</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#为什么使用-Bootstrap？"><span class="toc-number">3.</span> <span class="toc-text">为什么使用 Bootstrap？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Bootstrap-包的内容"><span class="toc-number">4.</span> <span class="toc-text">Bootstrap 包的内容</span></a></li></ol>
    </div>
  </span>
</div>

    
    <div class="content index width mx-auto px2 my4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        bootstrap
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">iiitoo</span>
      </span>
      
    <div class="postdate">
        <time datetime="2014-11-29T15:05:59.000Z" itemprop="datePublished">2014-11-29</time>
    </div>


      
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/tags/网建随记/">网建随记</a>
    </div>


    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <h4 id="什么是-Bootstrap？"><a href="#什么是-Bootstrap？" class="headerlink" title="什么是 Bootstrap？"></a>什么是 Bootstrap？</h4><p>Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。</p>
<h4 id="历史"><a href="#历史" class="headerlink" title="历史"></a>历史</h4><p> </p><p>Bootstrap 是由 <em>Twitter</em> 的 <em>Mark Otto</em> 和 <em>Jacob Thornton</em> 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 </p><p>&#160;</p>
<h4 id="为什么使用-Bootstrap？"><a href="#为什么使用-Bootstrap？" class="headerlink" title="为什么使用 Bootstrap？"></a>为什么使用 Bootstrap？</h4><ul>
<li><strong>移动设备优先</strong>：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。  </li><li><strong>浏览器支持</strong>：所有的主流浏览器都支持 Bootstrap。  <p><img src="http://www.w3cschool.cc/images/compatible_ie.gif" alt="Internet Explorer" title="Internet Explorer"> <img src="http://www.w3cschool.cc/images/compatible_firefox.gif" alt="Firefox" title="Firefox"> <img src="http://www.w3cschool.cc/images/compatible_opera.gif" alt="Opera" title="Opera"> <img src="http://www.w3cschool.cc/images/compatible_chrome.gif" alt="Google Chrome" title="Google Chrome"> <img src="http://www.w3cschool.cc/images/compatible_safari.gif" alt="Safari" title="Safari"><br><li><strong>容易上手</strong>：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。  </li><li><strong>响应式设计</strong>：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 <a href="http://www.w3cschool.cc/bootstrap/bootstrap-responsive-design.html" target="_blank" rel="external">Bootstrap 响应式设计</a>。<br><img src="http://www.w3cschool.cc/wp-content/uploads/2014/06/responsive.jpg" alt="响应式设计"><br></li><li>它为开发人员创建接口提供了一个简洁统一的解决方案。  </li><li>它包含了功能强大的内置组件，易于定制。  </li><li>它还提供了基于 Web 的定制。  </li><li>它是开源的。</li>
</p></li></ul>
<h4 id="Bootstrap-包的内容"><a href="#Bootstrap-包的内容" class="headerlink" title="Bootstrap 包的内容"></a>Bootstrap 包的内容</h4><ul>
<li><strong>基本结构</strong>：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 <strong>Bootstrap 基本结构</strong> 部分详细讲解。  </li><li><strong>CSS</strong>：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 <strong>Bootstrap CSS</strong> 部分详细讲解。  </li><li><strong>组件</strong>：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 <strong>布局组件</strong> 部分详细讲解。  </li><li><strong>JavaScript 插件</strong>：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 <strong>Bootstrap 插件</strong> 部分详细讲解。  </li><li><strong>定制</strong>：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。</li>
</ul>

  </div>
</article>



    </div>
    
      <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">首</a></li>
         
          <li><a href="/about/">关于这</a></li>
         
          <li><a href="/reading/">读什么</a></li>
         
          <li><a href="/book/">写本书</a></li>
         
          <li><a href="/categories/blog/">写博客</a></li>
         
          <li><a href="/categories/learning/">做什么</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#什么是-Bootstrap？"><span class="toc-number">1.</span> <span class="toc-text">什么是 Bootstrap？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#历史"><span class="toc-number">2.</span> <span class="toc-text">历史</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#为什么使用-Bootstrap？"><span class="toc-number">3.</span> <span class="toc-text">为什么使用 Bootstrap？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Bootstrap-包的内容"><span class="toc-number">4.</span> <span class="toc-text">Bootstrap 包的内容</span></a></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
    <!-- <li class="social-share share-component" data-sites="facebook"></li> -->
    <li class="social-share share-component" data-sites="wechat"></li>
    <li class="social-share share-component" data-sites="qq"></li>
    <li class="social-share share-component" data-sites="twitter"></li>
    <li class="social-share share-component" data-sites="weibo"></li>
    <li class="social-share share-component" data-sites="tencent"></li>
    <li class="social-share share-component" data-sites="qzone"></li>
    <li class="social-share share-component" data-sites="douban"></li>
    <li class="social-share share-component" data-sites="diandian"></li>
    <li class="social-share share-component" data-sites="google"></li>
    <li class="social-share share-component" data-sites="linkedin"></li>
    <li class="social-share share-component" data-sites="qzone"></li>
    <!-- <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=https://iiitoo.com/2014/11/29/bootstrap/&title=bootstrap"><i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=https://iiitoo.com/2014/11/29/bootstrap/&is_video=false&description=bootstrap"><i class="fa fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="mailto:?subject=bootstrap&body=Check out this article: https://iiitoo.com/2014/11/29/bootstrap/"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="https://getpocket.com/save?url=https://iiitoo.com/2014/11/29/bootstrap/&title=bootstrap"><i class="fa fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://reddit.com/submit?url=https://iiitoo.com/2014/11/29/bootstrap/&title=bootstrap"><i class="fa fa-reddit fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://www.stumbleupon.com/submit?url=https://iiitoo.com/2014/11/29/bootstrap/&title=bootstrap"><i class="fa fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://digg.com/submit?url=https://iiitoo.com/2014/11/29/bootstrap/&title=bootstrap"><i class="fa fa-digg fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://www.tumblr.com/share/link?url=https://iiitoo.com/2014/11/29/bootstrap/&name=bootstrap&description="><i class="fa fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://connect.qq.com/widget/shareqq/index.html?url=https://iiitoo.com/2014/11/29/bootstrap/&title=&source=&desc=&pics="><i class="fa fa-qq fa-lg" aria-hidden="true"></i></a></li> -->

</ul>

    </div>

    <div id="actions-footer">
      <ul>
        <li id="toc"><a class="icon" href="#" onclick='$("#toc-footer").toggle();return false;'><i class="fa fa-list fa-lg" aria-hidden="true"></i> TOC</a></li>
        <li id="share"><a class="icon" href="#" onclick='$("#share-footer").toggle();return false;'><i class="fa fa-share-alt fa-lg" aria-hidden="true"></i> Share</a></li>
        <li id="top" style="display:none"><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa fa-chevron-up fa-lg" aria-hidden="true"></i> Top</a></li>
        <li id="menu"><a class="icon" href="#" onclick='$("#nav-footer").toggle();return false;'><i class="fa fa-bars fa-lg" aria-hidden="true"></i> Menu</a></li>
      </ul>
    </div>

  </div>
</div>

    
    <footer id="footer">
  <div class="footer-left">
    Copyright &copy; 2017 iiitoo
  </div>
  <div class="footer-right">
    <nav>
      <ul>
         
          <li><a href="/">首</a></li>
         
          <li><a href="/about/">关于这</a></li>
         
          <li><a href="/reading/">读什么</a></li>
         
          <li><a href="/book/">写本书</a></li>
         
          <li><a href="/categories/blog/">写博客</a></li>
         
          <li><a href="/categories/learning/">做什么</a></li>
        
      </ul>
    </nav>
  </div>
</footer>

</body>
</html>
<!-- jquery -->
<script src="/lib/jquery/jquery.min.js"></script>
<script src="/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/lib/share/js/jquery.share.js"></script>
<script src="/lib/justified-gallery/jquery.justifiedGallery.min.js"></script>
<script src="/js/main.js"></script>
<!-- Google Analytics -->

<!-- Disqus Comments -->


